<template>
  <div class="common-layout">
    <el-container>
      <!-- 表单提交 -->
      <el-dialog
        v-model="dialog.visible"
        :title="$t('worksheet.Problemfeedback')"
        width="600px"
        @close="closeDialog"
      >
        <!-- 类型 -->
        <el-form
          ref="questionfrom"
          label-width="160px"
          :model="formData"
          :rules="rules"
          label-position="left"
        >
          <el-form-item :label="$t('worksheet.Problemtyp')" prop="type">
            <el-select
              v-model="formData.type"
              :placeholder="$t('worksheet.placeholder')"
            >
              <el-option
                v-for="dict in question_form_type"
                :key="dict.value"
                :label="translateTagDictI18n('question_form_type', dict.label)"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <!-- 级别 -->
          <el-form-item :label="$t('worksheet.Problemstufe')" prop="level">
            <el-select
              v-model="formData.level"
              :placeholder="$t('worksheet.placeholder')"
            >
              <el-option
                v-for="dict in question_form_level"
                :key="dict.value"
                :label="translateTagDictI18n('question_form_level', dict.label)"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <!-- 描述 -->
          <el-form-item
            :label="$t('worksheet.Problembeschreibung')"
            prop="description"
          >
            <el-row>
              <el-col :span="80"
                ><el-input
                  v-model="formData.description"
                  type="textarea"
                ></el-input
              ></el-col>
            </el-row>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button v-throttle="sublit" type="primary" :loading="loading">{{
              $t("worksheet.Absenden")
            }}</el-button>
            <el-button @click="closeDialog">{{
              $t("worksheet.zurück")
            }}</el-button>
          </div>
        </template>
      </el-dialog>
      <div v-draggable>
        <!--  问题反馈 -->
        <el-dialog
          v-model="dialog2.visible"
          :title="$t('worksheet.Problemdetails')"
          width="600px"
          @close="closeDialog2"
        >
          <el-form
            ref="coursenameFormRef"
            label-width="160px"
            label-position="left"
          >
            <!-- 提交时间 -->
            <el-form-item :label="$t('worksheet.Einreichungszeit')">
              <el-text class="mx-1">{{ ViewFromData.createTime }}</el-text>
            </el-form-item>
            <!-- 类型 -->
            <el-form-item :label="$t('worksheet.Problemtyp')">
              <el-text class="mx-1">{{
                ViewFromData.questionTypeLabel
              }}</el-text>
            </el-form-item>
            <!-- 级别 -->
            <el-form-item :label="$t('worksheet.Problemstufe')">
              <el-text class="mx-1">{{
                ViewFromData.questionLevelLabel
              }}</el-text>
            </el-form-item>
            <!-- 描述 -->
            <el-form-item :label="$t('worksheet.Problembeschreibung')">
              <el-text class="mx-1">{{ ViewFromData.description }}</el-text>
            </el-form-item>
            <!-- 处理 -->
            <el-form-item :label="$t('worksheet.Bearbeitungsfortschritt')">
              <el-text class="mx-1">{{
                ViewFromData.questionHandlingLabel
              }}</el-text>
            </el-form-item>
            <!-- 回复 -->
            <el-form-item :label="$t('worksheet.PrüfungAntwort')">
              <el-row>
                <el-col :span="80"
                  ><el-input
                    v-model="ViewFromData.replay"
                    type="textarea"
                    disabled
                  ></el-input
                ></el-col>
              </el-row>
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="closeDialog2">{{
                $t("worksheet.zurück")
              }}</el-button>
            </div>
          </template>
        </el-dialog>
      </div>
      <el-main>
        <el-card shadow="never">
          <template #header>
            <div class="flex justify-between">
              <!-- 这里填写操作 -->
              <el-button
                v-hasPerm="['me:worksheet:submit']"
                class="addwork"
                type=""
                style="color: var(--el-color-primary)"
                @click="openDialog()"
              >
                <svg-icon
                  icon-class="worksheetmessage"
                  style="font-size: 18px; margin-right: 5px"
                ></svg-icon>
                {{ $t("worksheet.Problemfeedback") }}
              </el-button>
            </div>
          </template>
          <!-- 列表 -->
          <div class="tableto">
            <el-table v-loading="tabloading" :data="userList" border>
              <el-table-column
                key="id"
                :label="$t('worksheet.Fragenummer')"
                align="center"
                prop="id"
              />
              <el-table-column
                key="questionTypeLabel"
                :label="$t('worksheet.Problemtyp')"
                align="center"
                prop="questionTypeLabel"
              >
                <template #default="scope">
                  <el-tag
                    class="ml-2"
                    :type="questiontypestatus(scope.row.questionTypeLabel)"
                    >{{ scope.row.questionTypeLabel }}</el-tag
                  >
                </template>
              </el-table-column>
              <el-table-column
                key="questionLevelLabel"
                :label="$t('worksheet.Problemstufe')"
                align="center"
                prop="questionLevelLabel"
              >
                <template #default="scope">
                  <el-tag
                    class="ml-2"
                    :type="questionlevelstatus(scope.row.questionLevelLabel)"
                    >{{ scope.row.questionLevelLabel }}</el-tag
                  >
                </template>
              </el-table-column>
              <el-table-column
                key="questionHandlingLabel"
                :label="$t('worksheet.Problemstatus')"
                align="center"
                prop="questionHandlingLabel"
              >
                <template #default="scope">
                  <el-tag
                    class="ml-2"
                    :type="status(scope.row.questionHandlingLabel)"
                    >{{ scope.row.questionHandlingLabel }}</el-tag
                  >
                </template>
              </el-table-column>
              <el-table-column
                key="description"
                :label="$t('worksheet.Problembeschreibung')"
                align="center"
                prop="description"
              />
              <el-table-column :label="$t('worksheet.Betrieb')" align="center">
                <!-- 这里填写操作 -->
                <template #default="scope">
                  <el-button
                    v-hasPerm="['me:worksheet:show']"
                    type="primary"
                    link
                    size="small"
                    @click="viewWorkfrom(scope.row.id)"
                    ><i-ep-edit />{{ $t("worksheet.Prüfung") }}</el-button
                  >
                  <el-button
                    v-hasPerm="['me:worksheet:withdraw']"
                    type="primary"
                    size="small"
                    link
                    @click="remove(scope.row.id)"
                    ><i-ep-refresh-left />{{
                      $t("worksheet.zurückziehen")
                    }}</el-button
                  >
                  <el-button
                    v-hasPerm="['me:worksheet:reply']"
                    type="primary"
                    link
                    size="small"
                    @click="replayWork(scope.row.id)"
                  >
                    <svg-icon icon-class="reply" />{{
                      $t("worksheet.Antwort")
                    }}</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <pagination
              v-if="total > 0"
              v-model:total="total"
              v-model:page="WokeData.pageNum"
              v-model:limit="WokeData.pageSize"
              @pagination="getinfo"
            />
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Worksheet",
  inheritAttrs: false,
});
import {
  AddWoke,
  RemoveWoke,
  ReplyWoke,
  ViewWoke,
  getWokeTypePage,
} from "@/api/me";
import {
  ReplyWokeFrom,
  ViewWokeFrom,
  ViewWokeFromData,
  WokeDeleteFrom,
  WokeFrom,
  WokePageVO,
  WorkTypeQuery,
} from "@/api/me/types";
import pagination from "@/components/Pagination/index.vue";
import SvgIcon from "@/components/SvgIcon/index.vue";
import { translateTagDictI18n } from "@/utils/i18n";

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { question_form_type } = proxy?.useDict("question_form_type"); // 工单问题类型
const { question_form_level } = proxy?.useDict("question_form_level"); // 工单问题级别
const questionfrom = ref(ElForm); // 用户表单
const loading = ref(false);
const tabloading = ref(false);
const userList = ref<WokePageVO[]>();
const total = ref(0);
// 获取工单请求数据
const WokeData = reactive<WorkTypeQuery>({
  pageNum: 1,
  pageSize: 10,
});
// 添加工单信息
const formData = reactive<WokeFrom>({});
// 查看工单详情信息
const ViewData = reactive<ViewWokeFrom>({});
// 撤回工单
const DeleteData = reactive<WokeDeleteFrom>({});
// 查看工单详情信息
const ViewFromData = reactive<ViewWokeFromData>({});
// 回复工单信息
const ReplyData = reactive<ReplyWokeFrom>({});
// 提交表单规则
const rules = reactive({
  type: [{ required: true, message: "问题类型不能为空", trigger: "blur" }],
  level: [{ required: true, message: "问题级别不能为空", trigger: "blur" }],
  description: [
    { required: true, message: "问题描述不能为空", trigger: "blur" },
  ],
});

// 1 判断处理状态标签颜色函数
function status(label: string) {
  if (label === "已处理") {
    return "success";
  } else {
    return "danger";
  }
}
// 2 判断问题类型标签函数
function questiontypestatus(label: string) {
  if (label === "提建议") {
    return "";
  } else if (label === "操作错误") {
    return "warning";
  } else {
    return "danger";
  }
}
// 3 判断问题等级标签函数
function questionlevelstatus(label: string) {
  if (label === "普通") {
    return "";
  } else if (label === "警告") {
    return "warning";
  } else {
    return "danger";
  }
}
// 获取当前用户工单
function getinfo() {
  tabloading.value = true;
  getWokeTypePage(WokeData)
    .then(({ data }) => {
      userList.value = data.list;
      total.value = data.total;
    })
    .catch(() => {})
    .finally(() => {
      tabloading.value = false;
    });
}
// 提交工单
function sublit() {
  // 接口
  questionfrom.value.validate((valid: boolean) => {
    if (valid) {
      loading.value = true;
      AddWoke(formData)
        .then(() => {
          ElMessage.success("问题反馈成功");
          // 刷新参数
          getinfo();
          // 关闭表单
          dialog.visible = false;
          formData.description = "";
        })
        .catch(() => {})
        .finally(() => (loading.value = false));
    }
  });
}
// 撤回工单
function remove(id: number) {
  DeleteData.formId = id;
  // 接口
  ElMessageBox.confirm("确认撤回? 该操作不可逆！", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(function () {
    RemoveWoke(DeleteData)
      .then(() => {
        ElMessage.success("问题撤回成功");
        getinfo(); // 重新刷新表单信息
      })
      .catch(() => {});
  });
}
// 查询工单详情信息
function viewWorkfrom(id: number) {
  openDialog2();
  // 接口
  ViewData.formId = id;
  ViewWoke(ViewData)
    .then(({ data }) => {
      ViewFromData.createTime = data.createTime;
      ViewFromData.description = data.description;
      ViewFromData.questionHandlingLabel = data.questionHandlingLabel;
      ViewFromData.questionLevelLabel = data.questionLevelLabel;
      ViewFromData.questionTypeLabel = data.questionTypeLabel;
      ViewFromData.replay = data.replay;
    })
    .catch(() => {});
}
// 回复工单
function replayWork(id: number) {
  ElMessageBox.prompt("请输入回复信息:", "回复", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(({ value }) => {
      if (!value) {
        ElMessage.warning("请输入回复信息!!!");
        return false;
      }
      // 更新状态信息
      ReplyData.formId = id;
      ReplyData.replay = value;
      ReplyData.state = 2;
      // 接口
      ReplyWoke(ReplyData)
        .then(() => {
          ElMessage.success("回复成功!");
          getinfo(); // 重新刷新表单信息
        })
        .catch(() => {});
    })
    .catch(() => {});
}
// 弹窗组件
const dialog = reactive<DialogOption>({
  visible: false,
});
/**
 * 打开新增课程弹窗
 */
function openDialog() {
  dialog.visible = true;
  dialog.title = "问题反馈";
}
/**
 * 关闭新增弹窗
 */
function closeDialog() {
  dialog.visible = false;
  formData.description = "";
}
// 查看弹窗组件
const dialog2 = reactive<DialogOption>({
  visible: false,
});
/**
 * 打开查看问题详情弹窗组件
 */
function openDialog2() {
  dialog2.visible = true;
  dialog2.title = "问题详情";
}
/**
 * 关闭问题详情
 */
function closeDialog2() {
  dialog2.visible = false;
}

// 初始化工单信息
onMounted(() => {
  getinfo();
});
</script>

<style scoped></style>
